<template>
  <div class="buy">
    <navigation-bar :pageName="'立即购买'" @onLeftClick="onBackClick"></navigation-bar>
    <!-- 内容区 -->
    <div class="buy-content">
      <!-- 购买的商品 -->
      <div class="buy-content-goods">
        <!-- 商品图片 -->
        <img :src="goodsData.img" alt class="buy-content-goods-img" />
        <!-- 商品描述 -->
        <div class="buy-content-goods-desc">
          <!-- 商品名称 -->
          <p class="buy-content-goods-desc-name">{{goodsData.name}}</p>
          <!-- 商品价格 -->
          <p class="buy-content-goods-desc-price">￥{{goodsData.price | priceValue}}</p>
        </div>
      </div>
      <!-- 支付方式 -->
      <ul class="buy-content-list">
        <li
          :key="index"
          @click="onPaymentItemClick(item)"
          class="buy-content-list-item"
          v-for="(item, index) in paymentDatas"
        >
          <!-- 支付方式的图标 -->
          <img :src="item.icon" alt class="buy-content-list-item-icon" />
          <!-- 描述 -->
          <div class="buy-content-list-item-desc">
            <!-- 支付方式名称 -->
            <p class="buy-content-list-item-desc-name">{{item.name}}</p>
            <!-- 支付方式描述 -->
            <p class="buy-content-list-item-desc-desc">{{item.desc}}</p>
          </div>
          <!-- 选中支付方式的标记 -->
          <img
            :src="getCheckIcon(selectPayment.id === item.id)"
            alt
            class="buy-content-list-item-check"
          />
        </li>
      </ul>
    </div>

    <!-- 立即购买 -->
    <div @click="onPayClick" class="pay page-commit">立即购买</div>
  </div>
</template>

<script>
import NavigationBar from '@com/currency/NavigationBar'
export default {
  name: 'buy',
  components: {
    NavigationBar
  },
  data () {
    return {
      goodsData: {},
      /**
       * 支付方式数据源
       */
      paymentDatas: [
        {
          id: '1',
          name: '支付宝支付',
          desc: '数亿用户都在用，安全可信托',
          icon: require('@img/alipay.svg')
        },
        {
          id: '2',
          name: '微信支付',
          desc: '亿万用户选择，更快更安全',
          icon: require('@img/weichat.png')
        }
      ],
      selectPayment: {}
    }
  },
  created: function () {
    this.selectPayment = this.paymentDatas[0]
    this.loadGoodsData()
  },
  methods: {
    /**
     * 后退页面
     */
    onBackClick: function () {
      this.$router.go(-1)
    },
    loadGoodsData: function () {
      this.$http.post('/goodsDetail',
        {
          goodsId: this.$route.query.goodsId
        }
      ).then(data => {
        this.goodsData = data.goodsData[0]
      })
    },
    onPaymentItemClick: function (item) {
      this.selectPayment = item
    },
    /**
      * 支付按钮点击事件
      */
    onPayClick: function () {
      // 判断用户选择的支付方式

      // 支付宝支付
      if (this.selectPayment.id === '1') {
        this.aliPay()
      }
      // 微信支付
      else if (this.selectPayment.id === '2') {
        this.wxPay()
      }
    },
    getCheckIcon: function (isCheck) {
      return isCheck ? require('@img/check.svg') : require('@img/no-check.svg')
    },
    /**
        * 支付宝支付
        */
    aliPay: function () {
      // 判断当前设备为 Android 设备
      if (window.androidJSBridge) {
        // 调用 支付宝支付的方法
        window.androidJSBridge.aliPay(JSON.stringify(this.goodsData))
      }
    },
    /**
     * 微信支付
     */
    wxPay: function () {
      // 判断当前设备为 Android 设备
      if (window.androidJSBridge) {
        // 调用 微信支付的方法
        window.androidJSBridge.wxPay(JSON.stringify(this.goodsData))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';

.buy {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: $bgColor;

  &-content {
    overflow: hidden;
    height: 100%;

    // 商品
    &-goods {
      background-color: white;
      padding: $marginSize;
      display: flex;
      border-bottom: px2rem(1) solid $lineColor;
      border-top: px2rem(1) solid $lineColor;
      margin-top: $marginSize;

      &-img {
        width: px2rem(100);
        height: px2rem(100);
      }

      &-desc {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 $marginSize;

        &-name {
          font-size: $infoSize;
          line-height: px2rem(18);
        }

        &-price {
          font-size: $titleSize;
          color: $mainColor;
          font-weight: 500;
        }
      }
    }

    // 支付方式
    &-list {
      margin-top: $marginSize;

      &-item {
        display: flex;
        background-color: white;
        border-bottom: px2rem(1) solid $lineColor;
        padding: $marginSize;
        align-items: center;

        &-icon {
          height: px2rem(30);
        }

        &-desc {
          margin-left: px2rem(12);
          flex-grow: 1;

          &-name {
            font-size: $infoSize;
          }

          &-desc {
            font-size: $minInfoSize;
            margin-top: px2rem(6);
            color: $hintColor;
          }
        }

        &-check {
          width: px2rem(16);
          height: px2rem(16);
        }
      }
    }
  }

  // 立即支付按钮
  .pay {
    position: absolute;
    bottom: px2rem(52);
  }
}
</style>
